<template>
	<view class="content" v-if="!firstLoading">
		<view class="header">
			<!-- 顶部搜索框 -->
			<global-header @focus="$go('/pages/search/index')"></global-header>
			<!-- 选择器 -->
			<tags-nav :list="nav" 
					:of-selected="selectCate"
					@tagSelect="changeCate"
			>
			</tags-nav>
		</view>
		<view class="blank"></view>
		<waterful-list v-if="articles.length != 0"
			:left-list="leftList"
			:right-list="rightList"
			@itemClick="goArticleDetails"
			:load="load"
			@getMore="getRecommandArticle()"
		></waterful-list>
		<view class="none" v-else>
			<none-page></none-page>
		</view>
		
		<!-- tabbar -->
		<define-tabbar></define-tabbar>
	</view>
	<loading-page v-else></loading-page>
</template>

<script>
	// 顶部搜索框
	import globalHeader from "@/components/global-header/global-header.vue";
	// 选择器
	import tagsNav from "./components/tagsNav.vue";
	// 瀑布流
	import waterfulList from "@/components/waterfulList/waterfulList.vue";
	// 自定义tabbar
	import defineTabbar from "@/components/define-tabbar/define-tabbar.vue";
	// 无资源组件
	import nonePage from "@/components/none/none.vue";
	
	import {
		categoryRecommoned
	} from "@/api/category.js";
	import {
		getRecommandArticle
	} from "@/api/article.js";
	import {
		searchByCategory
	} from "@/api/search.js";
	
	import {
		getUserInfo
	} from "@/api/user.js";
	
	export default {
		components: {
			globalHeader,
			tagsNav,
			waterfulList,
			nonePage
			// jinEdit
		}, 
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
				nav: [],
				selectCate: 0,
				firstLoading: true,
				pageInfo: {
					page: 1,
					pageSize: 20
				},
				articles: [],
				load: 'loadmore'
			}
		},
		computed: {
			leftList() {
				let leftList = [];
				this.articles.forEach((item, index) => {
					if(index % 2 == 0) leftList.push(item);
				});
				return leftList;
			},
			rightList() {
				let rightList = [];
				this.articles.forEach((item, index) => {
					if(index % 2 != 0) rightList.push(item);
				});
				return rightList;
			}
		},
		async mounted() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
			try{
				await this.getCategory();
				await this.getArticleByCategory();
			}catch(e) {
				// this.$msg("网络错误！");
			}
			this.firstLoading = false;
		},
		onReachBottom() {
			this.getArticleByCategory();
		},
		methods: {
			// 获取首页推荐的分类信息
			getCategory() {
				return new Promise((resolve, reject) => {
					categoryRecommoned().then(res => {
						this.nav = res;
						this.categoryId = res[0].id;
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				});
			},
			// 获取推荐文章
			getRecommandArticle() {  
				// 当当前正在加载中获没有更多了，则直接返回
				if(["loading", "nomore"].indexOf(this.load) != -1) return;
				// 让当前处于加载状态
				this.load = "loading";
				return new Promise((resolve, reject) => {
					getRecommandArticle(this.pageInfo).then(res => {
						this.articles = [...this.articles, ...res.list];
						
						if(res.total <= this.articles.length) this.load = "nomore";
						else {
							this.load = "loadmore";
							this.pageInfo.page++;
						}
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				})
			},
			getArticleByCategory() {
				// 当当前正在加载中获没有更多了，则直接返回
				if(["loading", "nomore"].indexOf(this.load) != -1) return;
				// 让当前处于加载状态
				this.load = "loading";
				return new Promise((resolve, reject) => {
					let categoryId = this.nav[this.selectCate].id;
					searchByCategory({
						...this.pageInfo,
						categoryId
					}).then(res => {
						this.articles = [...this.articles, ...res.articles];
						if(res.total <= this.articles.length) this.load = "nomore";
						else {
							this.load = "loadmore";
							this.pageInfo.page++;
						}
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				})
			},
			async changeCate(value) {
				//当前选择项
				this.selectCate = value.index;
				// 清空pageInfo
				this.pageInfo = {
					page: 1,
					pageSize: 20
				}
				//修改load
				this.load = "loadmore";
				// 清空之前的article
				this.articles = [];
				// 调用获取该文章分类方法
				await this.getArticleByCategory();
			},
			// 去文章详情页
			goArticleDetails(value) {
				this.$go("/pages/article/index",{
					id: value.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	.header{
		position: fixed;
		width: 100vw;
		z-index: 99;
		background-color: white;
	}
	.blank{
		/* #ifdef H5 */
		height: 165rpx;
		/* #endif */
		/* #ifndef H5 */
		height: 220rpx;
		/* #endif */
	}
}
</style>
